<template>
  <div class="page-container">

    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-container>
        <el-aside width="350px" class="el-aside-Superior">
          <p class="tree_title">组织架构管理</p>
          <el-tree :data="deptTreeList"
                   :default-expand-all="true"
                   highlight-current
                   :expand-on-click-node="false"
                   :render-content="renderContent"
                   @node-click="handleNodeClick"
                   class="left-tree"
                   :props="defaultProps"
                   show-checkbox></el-tree>
        </el-aside>

        <el-container v-if="deptInfo.id">
          <el-header class="el-container-herder mar-botm-15">
            <div class="dept-context-title mb40">组织信息：</div>
            <div class="dept-context">
              <div class="mb40">
                <span class="color333 font18  w100 t_r">组织ID：</span>
                <span class="color333 font18 w230">{{deptInfo.id}}</span>
              </div>
              <div class="mb40">
                <span class="color333 font18  w100 t_r">组织名称：</span>
                <span class="color333 font18 w230">{{deptInfo.deptName}}</span>
              </div>
            </div>
            <div class="dept-context">
              <div>
                <span class="color333 font18  w100 t_r">组织级别：</span>
                <span class="color333 font18 w230" v-if="deptInfo.deptType == '0'">运营平台</span>
                <span class="color333 font18 w230" v-if="deptInfo.deptType == '1'">供应商</span>
                <span class="color333 font18 w230" v-if="deptInfo.deptType == '2'">商家</span>
                <span class="color333 font18 w230" v-if="deptInfo.deptType == '3'">店铺</span>
              </div>
              <div>
                <span class="color333 font18  w100 t_r">上级组织：</span>
                <span class="color333 font18 w230">{{deptInfo.parentName}}</span>
              </div>
            </div>
          </el-header>

          <el-main class="el-container-herder el-main-content">
            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
              <el-tab-pane label="账号信息" name="accountInformation">
                <div class="f-r addAccount">
                  <kt-button type="primary" :size="size" @click="addSysUser" perms="sys:dept:add" label="添加账号"></kt-button>
                </div>

                <!-- table表格 -->
                <el-table
                  min-height="350"
                  :data="userTableData"
                  :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554','text-align': 'center'}"
                  :size="tableSize"
                  :align="align"
                  :default-sort = "{prop: 'id', order: 'descending'}"
                  highlight-current-row
                  stripe>
                  <el-table-column align="center" prop="id" label="ID" min-width="100" sortable></el-table-column>
                  <el-table-column align="center" prop="type" label="所属平台" min-width="150" sortable>
                    <template slot-scope="scope">
                      <div v-if="scope.row.type=='0'">运营用户</div>
                      <div v-if="scope.row.type=='1'">商家用户</div>
                      <div v-if="scope.row.type=='2'">店铺用户</div>
                      <div v-if="scope.row.type=='3'">供应商用户</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="number" label="工号" min-width="100" sortable></el-table-column>
                  <el-table-column align="center" prop="account" label="账号" min-width="150" sortable></el-table-column>
                  <el-table-column align="center" prop="username" label="用户姓名" min-width="150" sortable></el-table-column>
                  <el-table-column align="center" prop="mobile" label="手机号" min-width="150" sortable></el-table-column>
                  <el-table-column align="center" prop="lname" label="所属组织" min-width="150" sortable></el-table-column>
                  <el-table-column align="center" prop="pName" label="上级名称" min-width="150" sortable></el-table-column>
                  <el-table-column align="center" label="状态" min-width="150" sortable>
                    <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="启用"
                        inactive-text="停用"
                        @change="switchChange(scope.row)"
                        active-value="1"
                        inactive-value="0">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" fixed="right" label="操作" width="260">
                    <template slot-scope="scope">
                      <kt-button @click="settingAuthority(scope.row)" type="text" perms="sys:dept:site" label="设置权限"></kt-button>
                      <kt-button @click="updateUccUserAuthor(scope.row)" type="text" perms="sys:dept:edit" label="编辑"></kt-button>
                      <kt-button @click="deleteUser(scope.row)" type="text" perms="sys:dept:delete" label="删除"></kt-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="t_r">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="filters.start"
                    :page-sizes="[10, 20, 50, 100 ,300 , 500]"
                    :page-size="filters.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="会员信息" name="memberInformation">
                <dept-manager-member ref="deptManagerMember"></dept-manager-member>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-container>
    </div>

    <!-- 弹窗部分 -->
    <el-dialog :visible.sync="dialogVisibleSysUser" title="添加账号">
      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="dataForm.username" autocomplete="off" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="dataForm.account" autocomplete="dataForm.account" :disabled="!operation" maxlength="20" oninput="value=value.replace(/[^\w\.\/]/ig,'')"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="number">
          <el-input v-model="dataForm.number" autocomplete="dataForm.number"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="dataForm.password" type="password" autocomplete="dataForm.password" :disabled="!operation"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="dataForm.mobile" autocomplete="off" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status" :hidden="operation">
          <el-select v-model="dataForm.status" placeholder="状态">
            <el-option label="在职" value="1"></el-option>
            <el-option label="离职" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上级用户" prop="pid">
          <el-select
            v-model="dataForm.pid"
            clearable
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            @change="choseCustomer"
            style="width:100%"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.numbername"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="角色" prop="userRoles">
            <el-select v-model="dataForm.userRoles" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in roles" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item label="角色" prop="roleid">
          <el-select v-model="dataForm.roleid" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogVisibleAuthority" title="设置权限" :append-to-body="appendToBody">
        <el-form :inline="true" class="t_c" label-width="80px"
                 :label-position="labelPosition" :size="size" v-model="sysUserAuthorityDataForm"
                 ref="sysUserAuthorityDataForm">
          <el-form-item label="账号：" label-width="100px">
            {{sysUserAuthorityDataForm.account}}
          </el-form-item>
          <el-form-item label="姓名：" label-width="100px">
            {{sysUserAuthorityDataForm.username}}
          </el-form-item>
          <!-- <el-form-item label="角色：">
              <el-select v-model="sysUserAuthorityDataForm.roleid">
                  <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.id"></el-option>
              </el-select>
          </el-form-item> -->
          <el-form-item label="数据权限：" label-width="100px">
            <el-tree class="author-tree" ref="tree" :data="authorTreeList" node-key="id" show-checkbox :props="defaultProps" @check="selectAuhtorFun"></el-tree>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" plain @click="dialogVisibleAuthority=false" :size="size">
            <span>上一步</span>
          </el-button>
          <el-button type="primary" @click="addSysAuthor" :size="size">确定</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="dialogVisibleSysUser=false" :size="size">取消</el-button>
        <el-button type="primary" @click="addSelectUUCUser" :size="size">下一步</el-button>
      </div>
    </el-dialog>

    <!-- 设置权限弹窗 -->
    <el-dialog :visible.sync="tableSettingAuthor" title="设置权限" class="rightsSet">
      <el-form class="demo-form-inline2"
               :label-position="labelPosition" :size="size" v-model="authorDataForm"
               ref="authorDataForm">
        <el-row class="search-input">
          <el-form-item label="账号：" label-width="100px">
            <span class="value">{{authorDataForm.account}}</span>
          </el-form-item>
          <el-form-item label="姓名：" label-width="100px">
            <span class="value">{{authorDataForm.username}}</span>
          </el-form-item>
          <el-form-item label="角色：" label-width="100px">
            <el-select v-model="authorDataForm.roleid">
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据权限：" label-width="100px" class="t_r">
            <el-tree class="author-tree-dialog" ref="tableTree" :data="authorTreeList" node-key="id" show-checkbox :props="defaultProps" @check="settingAuthorTree">
            </el-tree>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="tableSettingAuthor=false" :size="size">取消</el-button>
        <el-button type="primary" @click="updateUserAuthor" :size="size">确定</el-button>
      </div>
    </el-dialog>

    <!-- 部门弹窗 -->
    <el-dialog :visible.sync="deptDialogVisible" :title="operation?'新增':'编辑'" class="rightsSet" width="40%">
      <el-form class="demo-form-inline2" :label-position="labelPosition" :size="size" :model="deptDataForm" ref="deptDataForm" :rules="deptDataFormRules">
        <el-form-item label="组织名称：" label-width="100px" prop="deptName">
          <el-input v-model="deptDataForm.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型：" label-width="100px" prop="deptType">
          <el-select v-model="deptDataForm.deptType" style="width:100%;">
            <el-option label="运营平台" :value="0"></el-option>
            <el-option label="供应商" :value="1"></el-option>
            <el-option label="商家" :value="2"></el-option>
            <el-option label="店铺" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" label-width="100px" prop="sort">
          <el-input v-model="deptDataForm.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注：" label-width="100px" prop="remark">
          <el-input v-model="deptDataForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="deptDialogVisible=false" :size="size">取消</el-button>
        <el-button type="primary" @click="saveDeptInfo" :size="size">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DeptManagerMember from './DeptManagerMember'
  import CyTable from '@/views/Core/JicTable'
  import KtButton from '@/views/Core/KtButton'
  import KtSwitch from '@/views/Core/KtSwitch'

  export default {
    components: {
      CyTable,
      KtButton,
      KtSwitch,
      DeptManagerMember
    },

    data() {
      return {
        activeName: 'accountInformation',
        labelPosition: 'right',
        size: 'small',
        tableSize: 'mini',
        deptTreeList: [],
        defaultProps: {
          children: 'children',
          label: 'deptName'
        },
        userTableData: [],
        deptInfo: {},
        align: 'center',
        filters: {
          start: 1,
          limit: 10
        },
        total: 0,
        defaultExpandedKeys: [179],
        //添加用户弹窗
        SysUserDataForm: {
          employinfo: ''
        },
        //添加用户
        dialogVisibleSysUser: false,
        tabsIndex: 'first',
        sysUserListloading: false,
        addSysUserChangeSelect: [],
        sysUserDataFormRules: {
          employinfo: [{required: true, message: '请输入工号/姓名', trigger: 'blur'}],
        },
        //设置权限
        dialogVisibleAuthority: false,
        sysUserAuthorityDataForm: {
          account: '',
          username: '',
          deptIdList: [],
          roleid: '',
          phone: ''
        },
        //权限机构List
        roleList: [],
        authorTreeList: [],
        //弹窗是否内嵌
        appendToBody: true,

        //表格按钮弹窗
        tableSettingAuthor: false,
        authorDataForm: {
          id: '',
          account: '',
          username: '',
          deptIdList: [],
          roleid: '',
          phone: ''
        },
        dataFormRules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          account: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
          // password: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
          password: [{required: this.operation == true ? true : false, message: '请输入登录密码', trigger: 'blur'}],
          lname: [{required: true, message: '请选择所属机构', trigger: 'change'}],
          userRoles: [{required: true, message: '请选择角色', trigger: 'change'}],
          mobile: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        },
        // 新增编辑界面数据
        dataForm: {
          id: 0,
          name: '',
          password: '',
          deptid: '',
          deptname: '',
          email: '',
          mobile: '',
          status: '1',
          userRoles: '1',
          account: '',
          pid: '',
          type: 0,
          number: '',
          username: ''
        },
        roles: [],
        options: [],
        operation: false, // true:新增, false:编辑
        visible: false,
        deptDialogVisible: false,//部门新增弹窗
        deptDataFormRules: {
          deptName: [{required: true, message: '请输入组织名称', trigger: 'blur'}],
          deptType: [{required: true, message: '请选择组织类型', trigger: 'change'}],
          sort: [{required: true, message: '请输入排序', trigger: 'blur'}],
        },
        deptDataForm: {
          id: 0,
          deptName: '',
          pid: '',
          sort: '',
          deptType: '',
          remark: '',

        },
        memMobile: '',                                           // 会员手机
        currentMobile: ''                                        // 存取当前手机
      }
    },

    methods: {
      renderContent(h, { node, data, store }) {
            return (
                <div>
                    <span>
                    <span>{node.label}</span>
                    </span>
                    <el-dropdown style="    margin-left: 10px;">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon-more"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button size="mini" on-click={ () => this.appendDept(data) }>新增下级</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="mini" on-click={ () => this.editDept(data) }>编辑</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="mini" on-click={ () => this.deleteDept(data) }>删除</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            );
        },
      appendDept(data) {
        this.deptDataForm.pid = data.id
        this.operation = true
        this.deptDialogVisible = true
      },
      editDept(data) {
        console.log(data)
        let params = Object.assign(this.deptDataForm, data)
        console.log(params)
        this.deptDialogVisible = true
      },
      deleteDept(data) {
        let params = {}
        params.ids = data.id
        var this_ = this
        this.utils.request.deleteDept(params, res => {
          if (res.code == '0000') {
            this_.$message({message: '操作成功', type: 'success'})
            this_.queryDeptTree()
          } else {
            this_.$message({
              message: '操作失败, ' + res.msg,
              type: 'error'
            })
          }
        })
      },

      /**
       * 部门新增编辑
       */
      saveDeptInfo: function () {
        this.$refs.deptDataForm.validate(valid => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              let params = Object.assign({}, this.deptDataForm)
              // if (this.utils.isNull(params.pid)) {
              // params.pid = 0;
              // }
              var this_ = this
              this.utils.request.editDeptInfo(params, function (res) {
                if (res.code == '0000') {
                  this_.$message({message: '操作成功', type: 'success'})
                  this_.deptDialogVisible = false
                  this_.$refs['deptDataForm'].resetFields()
                  this_.queryDeptTree()
                } else {
                  this_.$message({
                    message: '操作失败, ' + res.msg,
                    type: 'error'
                  })
                }
              })
            })
          }
        })
      },
      remoteMethod: function (query) {
        if (query !== '') {
          //查询后台客户信息
          var search = {}
          search.t = 'sysUser'
          search.username = query
          var this_ = this
          this.utils.request.queryUserList(search, function (res) {
            this_.options = res.data
          })
        } else {
          this.options = []
        }
      },
      choseCustomer: function (selVal) {
        var temp = this.options
        var this_ = this

        if (selVal == '' || selVal == null) {
          this_.dataForm.manager_name = ''
          this_.dataForm.manager_mobile = ''
        } else {
          $.each(temp, function (key, val) {
            if (val.id == selVal) {
              this_.dataForm.manager_name = val.manager_name
              this_.dataForm.manager_mobile = val.manager_mobile
              return
            }
          })
        }
      },

      /**
       * 修改数据权限
       */
      updateUserAuthor() {
        if (this.authorDataForm.deptIdList < 1) {
          this.$message({'message': '请选择用户数据权限', 'type': 'warning'})
          return false
        }
        this.utils.request.updateUserAuthor(this.authorDataForm, res => {
          console.log(res)
          this.$refs.tableTree.setCheckedKeys([])
          this.$set(this.authorDataForm, 'deptIdList', [])
          this.$set(this.authorDataForm, 'account', '')
          this.$set(this.authorDataForm, 'username', '')
          this.$set(this.authorDataForm, 'roleid', '')
          this.$set(this.authorDataForm, 'phone', '')
          this.$set(this.authorDataForm, 'id', '')
          this.tableSettingAuthor = false
          this.handleNodeClick({'id': this.deptInfo.id})
        })
      },

      /**
       * 选择数据权限
       */
      settingAuthorTree(val, changeList) {
        console.log('选择数据权限===》》》', val, changeList)
        this.$set(this.authorDataForm, 'deptIdList', changeList.checkedKeys)
      },

      /**
       * 新增用户
       */
      addSysAuthor() {
        if (this.sysUserAuthorityDataForm.deptIdList.length < 1) {
          this.$message({message: '请勾选用户数据权限', type: 'warning'})
          return false
        }
        //保存用户数据权限
        Object.assign(this.sysUserAuthorityDataForm, this.dataForm)
        this.sysUserAuthorityDataForm.deptId = this.deptInfo.id
        this.sysUserAuthorityDataForm.deptName = this.deptInfo.deptName
        if (this.sysUserAuthorityDataForm.id != null && this.sysUserAuthorityDataForm.id != '') {
          this.utils.request.updateUserInfoAuthor(this.sysUserAuthorityDataForm, res => {
            if (res.code == '0000') {
              this.$message({message: '编辑成功', type: 'success'})
              console.log(res)
              //清空选项
              this.$refs.tree.setCheckedKeys([])
              this.$set(this.sysUserAuthorityDataForm, 'deptIdList', [])
              this.$set(this.sysUserAuthorityDataForm, 'account', '')
              this.$set(this.sysUserAuthorityDataForm, 'username', '')
              this.$set(this.sysUserAuthorityDataForm, 'roleid', '')
              this.$set(this.sysUserAuthorityDataForm, 'phone', '')
              this.addSysUserChangeSelect = []
              this.$set(this.SysUserDataForm, 'employinfo', '')
              this.userTableData = []
              this.handleNodeClick({'id': this.deptInfo.id})
              //关闭弹窗
              this.dialogVisibleAuthority = false
              this.dialogVisibleSysUser = false
            } else {
              this.$message({message: res.msg, type: 'error'})
            }
          })
        } else {
          this.utils.request.saveUserInfoAuthor(this.sysUserAuthorityDataForm, res => {
            if (res.code == '0000') {
              this.$message({message: '添加成功', type: 'success'})
              console.log(res)
              //清空选项
              this.$refs.tree.setCheckedKeys([])
              this.$set(this.sysUserAuthorityDataForm, 'deptIdList', [])
              this.$set(this.sysUserAuthorityDataForm, 'account', '')
              this.$set(this.sysUserAuthorityDataForm, 'username', '')
              this.$set(this.sysUserAuthorityDataForm, 'roleid', '')
              this.$set(this.sysUserAuthorityDataForm, 'phone', '')
              this.addSysUserChangeSelect = []
              this.$set(this.SysUserDataForm, 'employinfo', '')
              this.userTableData = []
              this.handleNodeClick({'id': this.deptInfo.id})
              //关闭弹窗
              this.dialogVisibleAuthority = false
              this.dialogVisibleSysUser = false
            } else {
              this.$message({message: res.msg, type: 'error'})
            }
          })
        }
      },

      /**
       * 编辑用户信息
       */
      updateUccUserAuthor(params) {
        this.dialogVisibleSysUser = true
        this.restForm('SysUserDataForm')
        this.$nextTick(function () {
          this.dataForm = Object.assign({}, params)
        })
        this.operation = false
        //查询组织下的角色
        this.queryRoleList(this.deptInfo.id)
      },

      /**
       * 删除用户数据
       */
      deleteUser(params) {
        let ids = params.id + ','
        this.utils.request.deleteSysUser({'ids': ids}, res => {
          if (res.code == '0000') {
            this.$message({message: '添加成功', type: 'success'})
            this.handleNodeClick({'id': this.deptInfo.id})
          } else {
            this.$message({message: res.msg, type: 'error'})
          }
        })
      },

      /**
       * 选择UCC用户信息
       */
      addSysUserChangeSelectFun(val) {
        console.log(val)
        this.addSysUserChangeSelect = val
      },

      /**
       * 选中权限
       */
      selectAuhtorFun(val, changeList) {
        console.log('选择数据权限===》》》', val, changeList)
        this.$set(this.sysUserAuthorityDataForm, 'deptIdList', changeList.checkedKeys)
        //checkedKeys
      },

      /**
       * 添加用户弹窗
       */
      addSysUser() {
        this.dialogVisibleSysUser = true
        this.restForm('dataForm')
        this.operation = true
        //默认选中当前选中的组织下的权限
        let deptInfo = this.deptInfo
        //查询组织下的角色
        this.queryRoleList(deptInfo.id)
      },

      /**
       * 确认添加用户
       */
      addSelectUUCUser() {
        let addSysUserChangeSelect = this.dataForm
        this.appendToBody = true
        this.dialogVisibleAuthority = true
        this.$set(this.sysUserAuthorityDataForm, 'account', addSysUserChangeSelect.account)
        this.$set(this.sysUserAuthorityDataForm, 'username', addSysUserChangeSelect.username)
        this.$set(this.sysUserAuthorityDataForm, 'phone', addSysUserChangeSelect.mobile)
        this.$set(this.sysUserAuthorityDataForm, 'roleid', addSysUserChangeSelect.roleid)

        //默认选中当前选中的组织下的权限
        let deptInfo = this.deptInfo

        //查询当前组织下的所有组织
        this.utils.request.getChildeListrByPid({deptId: deptInfo.id}, res => {
          this.authorTreeList = res.data
          this.utils.request.getChilderByPid({'pid': deptInfo.id}, res => {
            res.data.push(deptInfo.id)
            this.sysUserAuthorityDataForm.deptIdList = res.data
            this.$refs.tree.setCheckedKeys(res.data)
          })
          //查询组织下的角色
          this.queryRoleList(deptInfo.id)
        })
      },

      //table的双色条纹
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },

      /**
       * 树点击查询用户列表
       */
      handleNodeClick(data) {
        this.deptInfo = data
        //查询当前组织下的用户
        this.filters.start = 1
        this.filters.limit = 10
        this.filters.queryDeptId = this.deptInfo.id
        this.querySysUserListByDeptId(this.filters)
        this.currentMobile = data.id
        if (this.activeName === 'memberInformation') {
          this.$refs.deptManagerMember.findPage({mobile: data.id, start: 1, limit: 10})
        }
      },

      /**
       * 用户列表查询
       */
      querySysUserListByDeptId(data) {
        this.utils.request.querySysUserListByDeptId(data, res => {
          if (res.code == '0000') {
            res.data.rows.forEach(item => {
              item.status = item.status + ''
            })
            this.userTableData = res.data.rows
            this.total = res.data.total
          } else {
            this.userTableData = []
            this.total = 0
          }
        })
      },

      // tab 点击
      handleTabClick(tab) {
        if (tab.name === 'memberInformation') {
          this.$refs.deptManagerMember.findPage({mobile: this.currentMobile, start: 1, limit: 10})
        }
      },

      /**
       * 查询树状机构
       */
      queryDeptTree() {
        this.utils.request.getAuthorDeptTree({}, res => {
          if (res.code == '0000') {
            this.deptTreeList = res.data
          } else {
            this.$message({message: '查询树状组织机构失败', type: 'error'})
          }
        })
      },

      /**
       * 条数刷新
       */
      handleSizeChange(val) {
        this.filters.limit = val
        this.querySysUserListByDeptId(this.filters)
      },

      /**
       * 换页刷新
       */
      handleCurrentChange(val) {
        this.filters.start = val
        this.querySysUserListByDeptId(this.filters)
      },

      /**
       * 设置用户权限
       */
      settingAuthority(row) {
        // this.appendToBody = false;
        this.tableSettingAuthor = true
        this.$set(this.authorDataForm, 'id', row.id)
        this.$set(this.authorDataForm, 'account', row.account)
        this.$set(this.authorDataForm, 'username', row.username)
        this.$set(this.authorDataForm, 'phone', row.molie)
        this.$set(this.authorDataForm, 'roleid', row.roleid.toString())
        //查询用户有哪些数据权限
        this.queryRoleList(1)
        this.utils.request.getChildeListrByPid({deptId: 1}, res => {
          this.authorTreeList = res.data
          this.utils.request.getUccUserAuthor({userId: row.id}, res => {
            this.authorDataForm.deptIdList = res.data
            this.$refs.tableTree.setCheckedKeys(res.data)
          })
        })
      },

      /**
       * 用户账号停用 启用
       */
      switchChange(val) {
        console.log('账号停用启用', val)
        this.utils.request.updateUccUserStatus({userId: val.id, status: val.status}, res => {
          console.log(res)
          this.$message({message: '操作成功', type: 'success'})
        })
      },

      /**
       * 搜索用户
       */
      queryPageSysUserList() {
        console.log('搜索用户')
        this.$refs.SysUserDataForm.validate(valid => {
          if (valid) {
            this.utils.request.getUccUserListByEmployinfo(this.SysUserDataForm, res => {
              console.log(res)
              if (res.code == '0000') {
                this.sysUserAddTableData = res.data
              } else {
                this.$message({message: res.msg, type: 'error'})
              }
            })
          }
        })
      },

      /**
       * 清空form表单
       */
      restForm(form) {
        if (this.$refs[form] != undefined) {
          this.$refs[form].resetFields()
        }
      },

      /**
       * 查询角色列表
       */
      queryRoleList(deptId) {
        this.utils.request.queryRoleListByDeptId({'deptId': deptId}, res => {
          this.roleList = res.data
        })
      }
    },

    mounted() {
      this.queryDeptTree()
      //查询角色列表
      this.queryRoleList()
    }
  }
</script>

<style scoped lang="scss">
  .font18 {
    font-size: 18px !important;
  }

  .color333 {
    color: #333;
  }

  .w100 {
    width: 100px;
  }

  .w230 {
    display: inline-block;
    width: 295px;
  }

  .mb40 {
    margin-bottom: 40px;
  }


  .fontDeptClass {
    margin: 0 20px 0 20px;
    text-align: right;
    width: 100px;
  }

  .fontDeptClass1 {
    margin: 0 20px 0 20px;
  }

  .main-context {
    font-size: 15px;
    margin-bottom: 20px;
  }

  /deep/ .el-main {
    padding: 0;
    padding-left: 20px;
  }

  .el-aside-Superior {
    width: 320px;
    height: 784px;
    background: #FFF;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    position: relative;
  }

  .el-container-herder {
    margin-left: 26px;
    width:1200px;
    height: auto;
    background: #FFF;
    border: 1px solid #DCDFE6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden;
  }

  .mar-botm-15 {
    height: 250px !important;
    margin-bottom: 30px;
    text-align: left;
    padding: 60px 0 45px 40px;
  }

  .el-main-content {
    text-align: left;
    padding: 40px 40px 0;
  }

  .dept-context {
    display: flex;
  }

  .dept-context-title {
    // font-weight: 800;
    font-size: 20px;
    color: #333;
  }

  .el-main-content button {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .left-tree /deep/ .el-tree-node__label {
    font-size: 16px;
  }

  .dialog-footer {
    text-align: center;
  }

  .author-tree {
    width: 260px;
    height: 260px;
    overflow-y: auto;
    border: 1px solid #d2d2d2;
    padding-top: 18px;
    box-sizing: border-box;
  }

  .el-form-item {
    display: block;
  }

  .value {
    height: 32px;
    line-height: 32px;
    color: #333;
    font-size: 16px;
  }

  .tree_title {
    font-size: 18px;
    color: #666666;
    text-align: left;
    line-height: 50px;
    line-height: 50px;
    padding-left: 10px;
    border-bottom: 1px solid #DCDFE6;
    margin-bottom: 40px;
  }

  /deep/ .el-tree {
    padding-left: 10px;
  }

  .f-l {
    float: left;
  }

  .f-r {
    float: right;
  }

  .addAccount {
    /deep/ .el-button {
      margin: 0 !important;
    }

    margin-bottom: 20px;
  }

  .rightsSet {
    /deep/ .el-dialog__body {
      padding: 0 168px !important
    }
  }

  .author-tree-dialog {
    width: 440px;
    height: 282px;
    overflow-y: auto;
    border: 1px solid #d2d2d2;
    padding-top: 18px;
    box-sizing: border-box;
    margin-top: 8px;
  }
</style>

<!--<template>-->
<!--  <div class="page-container">-->
<!--    &lt;!&ndash;工具栏&ndash;&gt;-->
<!--    <div class="toolbar" style="padding-left:15px;">-->
<!--      <el-form :inline="true" :model="filters" :size="size">-->
<!--        <el-row class="search-input">-->
<!--          <el-form-item label="名称：">-->
<!--            <el-input v-model="filters.deptName" placeholder="名称"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-row>-->
<!--        <el-row class="search-button">-->
<!--          <el-form-item>-->
<!--            <kt-button-->
<!--              icon="fa fa-search"-->
<!--              :label="$t('action.search')"-->
<!--              type="primary"-->
<!--              @click="findTreeData()"-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <kt-button-->
<!--              icon="fa fa-refresh"-->
<!--              :label="$t('action.reset')"-->
<!--              type="primary"-->
<!--              @click="reset"-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <kt-button-->
<!--              icon="fa fa-plus"-->
<!--              :label="$t('action.add')"-->
<!--              type="primary"-->
<!--              @click="handleAdd"-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-row>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    &lt;!&ndash;表格树内容栏&ndash;&gt;-->
<!--    <el-table-->
<!--      :data="tableTreeDdata"-->
<!--      stripe-->
<!--      row-key="id"-->
<!--      size="mini"-->
<!--      style="width: 100%;"-->
<!--      v-loading="loading"-->
<!--      element-loading-text="$t('action.loading')"-->
<!--      :header-cell-style="{ 'color': '#FFF','background-color': 'rgb(64, 158, 255)'}"-->
<!--    >-->
<!--      <el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>-->
<!--      <el-table-column prop="deptName" header-align="center" width="200" label="名称">-->
<!--        <template slot-scope="scope">-->
<!--          <div-->
<!--            style="color:#2F4554;text-decoration:underline;cursor:pointer;"-->
<!--            @click="findTreeData(scope.row.deptName)"-->
<!--          >{{ scope.row.deptName }}</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="parent_name"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="200"-->
<!--        label="上级机构"-->
<!--      ></el-table-column>-->
<!--      <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>-->
<!--      <el-table-column prop="createname" header-align="center" align="center" label="创建人"></el-table-column>-->
<!--      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"></el-table-column>-->
<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="185"-->
<!--        :label="$t('action.operation')"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <kt-button icon="fa fa-edit" :label="$t('action.edit')" @click="handleEdit(scope.row)"/>-->
<!--          <kt-button-->
<!--            icon="fa fa-trash"-->
<!--            :label="$t('action.delete')"-->
<!--            type="danger"-->
<!--            @click="handleDelete(scope.row)"-->
<!--          />-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    &lt;!&ndash; 新增修改界面 &ndash;&gt;-->
<!--    <el-dialog-->
<!--      :title="!dataForm.id ? '新增' : '修改'"-->
<!--      width="40%"-->
<!--      :visible.sync="dialogVisible"-->
<!--      :close-on-click-modal="false"-->
<!--    >-->
<!--      <el-form-->
<!--        :model="dataForm"-->
<!--        :rules="dataRule"-->
<!--        ref="dataForm"-->
<!--        @keyup.enter.native="submitForm()"-->
<!--        label-width="100px"-->
<!--        :size="size"-->
<!--        style="text-align:left;"-->
<!--      >-->
<!--        <el-row class="searchDialog-input">-->
<!--          <el-form-item label="名称：" prop="deptName">-->
<!--            <el-input v-model="dataForm.deptName" placeholder="名称"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="上级机构：" prop="parentName">-->
<!--            <popup-tree-input-->
<!--              :data="popupTreeData"-->
<!--              :props="popupTreeProps"-->
<!--              :prop="dataForm.parentName==null?'顶级机构':dataForm.parentName"-->
<!--              :nodeKey="''+dataForm.pid"-->
<!--              :currentChangeHandle="handleTreeSelectChange"-->
<!--            ></popup-tree-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item v-if="dataForm.type !== 2" label="排序编号：" prop="sort">-->
<!--            <el-input-number-->
<!--              v-model="dataForm.sort"-->
<!--              controls-position="right"-->
<!--              :min="0"-->
<!--              label="排序编号"-->
<!--            ></el-input-number>-->
<!--          </el-form-item>-->
<!--        </el-row>-->
<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button :size="size" @click="dialogVisible = false">{{$t('action.cancel')}}</el-button>-->
<!--        <el-button :size="size" type="primary" @click="submitForm()">{{$t('action.comfirm')}}</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import KtButton from "@/views/Core/KtButton";-->
<!--import TableTreeColumn from "@/views/Core/TableTreeColumn";-->
<!--import PopupTreeInput from "@/components/PopupTreeInput";-->
<!--import FaIconTooltip from "@/components/FaIconTooltip";-->
<!--import { format } from "@/utils/datetime";-->
<!--export default {-->
<!--  components: {-->
<!--    PopupTreeInput,-->
<!--    KtButton,-->
<!--    TableTreeColumn,-->
<!--    FaIconTooltip-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      size: "small",-->
<!--      loading: false,-->
<!--      filters: {-->
<!--        type: 3-->
<!--      },-->
<!--      tableTreeDdata: [],-->
<!--      dialogVisible: false,-->
<!--      dataForm: {-->
<!--        id: 0,-->
<!--        deptName: "",-->
<!--        pid: 0,-->
<!--        parentName: "",-->
<!--        sort: 0-->
<!--      },-->
<!--      dataRule: {-->
<!--        deptName: [-->
<!--          { required: true, message: "机构名称不能为空", trigger: "blur" }-->
<!--        ],-->
<!--        parentName: [-->
<!--          { required: true, message: "上级机构不能为空", trigger: "change" }-->
<!--        ]-->
<!--      },-->
<!--      popupTreeData: [],-->
<!--      popupTreeProps: {-->
<!--        label: "deptName",-->
<!--        children: "children"-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    // 获取数据-->
<!--    findTreeData: function(dept_name) {-->
<!--      console.log(dept_name);-->
<!--      if (this.utils.isNull(dept_name)) {-->
<!--      } else {-->
<!--        this.filters.deptName = dept_name;-->
<!--      }-->

<!--      var this_ = this;-->
<!--      if (this_.utils.isNull(this_.filters.deptName)) {-->
<!--        let params = Object.assign({}, this.filters);-->

<!--        this.utils.request.findDeptTree(params, function(res) {-->
<!--          if (res.code == "0000") {-->
<!--            this_.tableTreeDdata = res.data;-->
<!--            this_.popupTreeData = this_.getParentMenuTree(res.data);-->
<!--          } else {-->
<!--          }-->
<!--        });-->
<!--      } else {-->
<!--        let params = Object.assign({}, this.filters);-->
<!--        this.utils.request.queryDeptList(params, res => {-->
<!--          this_.tableTreeDdata = res.data;-->
<!--        });-->
<!--      }-->
<!--    },-->
<!--    // 获取上级机构树-->
<!--    getParentMenuTree: function(tableTreeDdata) {-->
<!--      let parent = {-->
<!--        id: 0,-->
<!--        pid: 0,-->
<!--        deptName: "顶级机构",-->
<!--        children: tableTreeDdata-->
<!--      };-->
<!--      return [parent];-->
<!--    },-->
<!--    // 显示新增界面-->
<!--    handleAdd: function() {-->
<!--      this.dialogVisible = true;-->
<!--      this.dataForm = {-->
<!--        id: "",-->
<!--        deptName: "",-->
<!--        pid: "",-->
<!--        parentName: "",-->
<!--        sort: ""-->
<!--      };-->
<!--      this.$refs["dataForm"].resetFields();-->
<!--    },-->
<!--    reset: function() {-->
<!--      this.filters = {};-->
<!--      this.findTreeData();-->
<!--    },-->
<!--    // 显示编辑界面-->
<!--    handleEdit: function(row) {-->
<!--      this.dialogVisible = true;-->
<!--      this.dataForm = Object.assign({}, row);-->

<!--      this.dataForm.parentName = row.parent_name;-->
<!--      if (this.dataForm.pid == 0) {-->
<!--        this.dataForm.parentName = "顶级机构";-->
<!--      }-->
<!--    },-->
<!--    // 删除-->
<!--    // handleDelete (row) {-->
<!--    //   this.$confirm('确认删除选中记录吗？', '提示', {-->
<!--    // 		type: 'warning'-->
<!--    //   }).then(() => {-->
<!--    //     debugger-->
<!--    //       let params = this.getDeleteIds([], row)-->
<!--    //       // data = this.getDeleteIds([], row)-->
<!--    //       //let data = Object.assign({}, this.row)-->
<!--    //       row.t="sysDept"-->
<!--    //       row.ids=row.id-->
<!--    //       this.utils.request.deleteUserInfo(row,this.deleteInfoBack)-->
<!--    //   })-->
<!--    // },-->
<!--    // 批量删除-->
<!--    handleDelete: function(row) {-->
<!--      this.$confirm("确认删除选中记录吗？", "提示", {-->
<!--        type: "warning"-->
<!--      }).then(() => {-->
<!--        let params = this.getDeleteIds([], row);-->
<!--        let ids = params.map(item => item.id).toString();-->
<!--        row.t = "sysDept";-->
<!--        row.ids = ids;-->
<!--        this.utils.request.deleteDept(row, this.deleteInfoBack);-->
<!--      });-->
<!--    },-->
<!--    //删除callback-->
<!--    deleteInfoBack(data) {-->
<!--      if (data.code == "0000") {-->
<!--        this.$message({ message: "操作成功", type: "success" });-->
<!--      } else {-->
<!--        this.$message({ message: "操作失败, ", type: "error" });-->
<!--      }-->
<!--      this.findTreeData();-->
<!--    },-->
<!--    // 获取删除的包含子机构的id列表-->
<!--    getDeleteIds(ids, row) {-->
<!--      // debugger;-->
<!--      ids.push({ id: row.id });-->
<!--      if (row.children != null) {-->
<!--        for (let i = 0, len = row.children.length; i < len; i++) {-->
<!--          this.getDeleteIds(ids, row.children[i]);-->
<!--        }-->
<!--      }-->
<!--      return ids;-->
<!--    },-->
<!--    // 机构树选中-->
<!--    handleTreeSelectChange(data, node) {-->
<!--      console.log(data);-->
<!--      this.dataForm.pid = data.id;-->
<!--      this.dataForm.parentName = data.deptName;-->
<!--    },-->
<!--    // 表单提交-->
<!--    submitForm() {-->
<!--      this.$refs["dataForm"].validate(valid => {-->
<!--        if (valid) {-->
<!--          this.$confirm("确认提交吗？", "提示", {}).then(() => {-->
<!--            this.editLoading = true;-->
<!--            let params = Object.assign({}, this.dataForm);-->
<!--            delete params["level"];-->
<!--            delete params["children"];-->
<!--            // debugger-->
<!--            if (params.parentName == "顶级机构") {-->
<!--              params.pid = 0;-->
<!--            }-->
<!--            params.type = 3;-->
<!--            if (this.utils.isNull(params.status)) {-->
<!--              params.status = 0;-->
<!--            }-->
<!--            this.utils.request.editDeptInfo(params, this.editInfoBack);-->
<!--          });-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    editInfoBack: function(data) {-->
<!--      if (data.code == "0000") {-->
<!--        this.$message({ message: "操作成功", type: "success" });-->
<!--        this.$refs["dataForm"].resetFields();-->
<!--      } else {-->
<!--        this.$message({ message: "操作失败", type: "error" });-->
<!--      }-->
<!--      this.dialogVisible = false;-->
<!--      this.editLoading = false;-->
<!--      this.findTreeData();-->
<!--    },-->
<!--    // 时间格式化-->
<!--    dateFormat: function(row, column, cellValue, index) {-->
<!--      return format(row[column.property]);-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.findTreeData();-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped lang='scss'>-->
<!--/deep/.el-table .cell,-->
<!--.el-table th div,-->
<!--.el-table&#45;&#45;border td:first-child .cell,-->
<!--.el-table&#45;&#45;border th:first-child .cell {-->
<!--  padding-left: 4px;-->
<!--}-->
<!--</style>-->
